<template>
    <div class="flex flex-col bg-white set-height">
        <div class="flex flex-1 h-full overflow-auto">
            <div class="w-410px p-16px flex-shrink-0 overflow-auto">
                <membershipCardPreview :rights-value="rightsSettingValue" :info-value="infoValue"/>
            </div>
            <div class="flex-1 overflow-auto">
                <addCardInfo ref="infoRef" @value-changed="handleInfoValueChange"/>
                <rightsSetting ref="settingRef" @value-changed="handleValueChange"/>
            </div>
        </div>
        <div class="py-14px flex items-center justify-center border-b-0 border-l-0 border-r-0 border-t-1 border-solid border-borderColor">
            <el-button>保存草稿</el-button>
            <el-button type="primary" @click="onSubmit">提交会员卡信息</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import membershipCardPreview from './components/membershipCardPreview.vue'
import addCardInfo from './components/addCardInfo.vue'
import rightsSetting from './components/rightsSetting.vue'
import type { AnyObject } from '@/api/type'
import type { RightsItemDto } from '@/api/membership/type'
import { setVipCard } from '@/api/membership'

const infoRef = ref()
const settingRef = ref()

const infoValue = ref()
const rightsSettingValue = ref()

const onSubmit = async () => {
    const resList = await Promise.all([infoRef.value.submit(), settingRef.value.submit()])
    if (!resList[0] || !resList[1]) return

    resList[1].forEach((item: RightsItemDto, index: number) => {
        item.seq = index
    })
    const query = {
        ...resList[0],
        rightsList: resList[1]
    }

    const res = await setVipCard(query)
    console.log(2121, res)
    // const infoRes = await infoRef.value.submit()
    // const settingRes = await settingRef.value.submit()
    // console.log(111, infoRes)
    // console.log(111, settingRes)
}

const handleValueChange = (ev: AnyObject) => {
    rightsSettingValue.value = ev
}

const handleInfoValueChange = (ev: AnyObject) => {
    console.log(11111, ev)
    infoValue.value = ev
}
</script>
<style lang="scss" scoped>
.set-height {
    height: calc(100vh - 118px);
}
</style>
